/* 全局盒模型设置 */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 全局和 body 样式 */
*,
body {
    padding: 0px;
    margin: 0px;
    color: #ffffff;
    font-family: myFirstFont !important;
}

/* html 和 body 样式 */
html,
body {
    background-color: #060348;
    #background: url("@/assets/images/bg.png") no-repeat;
    #background-size: cover;
    font-size: 62.5%; /* 设置根元素字体大小为 10px，方便 rem 计算 */
    color: #ffffff;
    position: relative;
    width: 100%;
    height: 100%;
}

/* 浮动类 */
.fl {
    float: left;
}

.fr {
    float: right;
}

/* 列表样式 */
ul,
ol {
    list-style: none;
}

/* 导航样式 */
.allnav {
    height: 100%;
}

/* 自定义字体 */
@font-face {
    font-family: myFirstFont;
    src: url('@/assets/fonts/DISPLAY_FREE_TFB.ttf');
}

/* 谷歌滚动条样式 */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
}

::-webkit-scrollbar-thumb {
    background-color: #5bc0de;
}

::-webkit-scrollbar-track {
    background-color: #ddd;
}

/* 框公共样式 */
.common-frame {
    width: 100%;
    height: auto; /* 高度自适应 */
    min-height: 12rem; /* 设置最小高度 */
    position: relative;
    border: 0.1rem solid #0bc4e9;
    background: rgba(0, 72, 115, 0.28);
    transition: all 1s;
    cursor: pointer;
}

/* 边框公共样式 */
.border:before {
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    bottom: -1px;
    top: -1px;
    left: 10%;
    border-bottom: 0.1rem solid #007297;
    border-top: 0.1rem solid #007297;
    transition: all 0.5s;
}

.border:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 80%;
    left: -0.1rem;
    right: -0.1rem;
    top: 10%;
    border-left: 0.1rem solid #007297;
    border-right: 0.1rem solid #007297;
    transition: all 0.5s;
}

.border:hover::before {
    width: 0%;
}

.border:hover::after {
    height: 0%;
}

.border:hover {
    box-shadow: -0.5rem 0 0.2rem rgba(255, 255, 255, 0.1),
    0 -0.5rem 0.2rem rgba(255, 255, 255, 0.1),
    0.5rem 0 0.2rem rgba(255, 255, 255, 0.1),
    0 0.5rem 0.2rem rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
}

/* 鼠标特效 */
* {
    cursor: url(@/assets/images/pointer.png) 8 3, auto !important;
}